<template>
  <div class="full">  
	<z-swiper
  		:autoplay='true'
  		:list='list'
  		:effect3d='effect3d' 
  		:fullScreen='fullScreen' 
  		:effect3dMargin='`${effect3dMargin}rpx`' 
  		:vertical='vertical'
  		:topFloat='topFloat'
  		:fotterFloat='fotterFloat'
  		:mode='mode'
  		:indicatorPos='indicatorPos'
  		></z-swiper>
  </div>
</template>

<script>
import zSwiper from '@/components/z-swiper/index.vue'
export default {
  components: {zSwiper},
  data: () => ({
	  effect3d:true,
	  autoplay:false,
	  vertical:false,
	  fullScreen:true,
	  effect3dMargin:40,
	  topFloat:true,
	  fotterFloat:true, 
	  mode:'round',
	  indicatorPos:'bottomCenter',
	  list:[
		 //  {
			// type:'video',  
			// topTip:'顶部提示',
			// poster:'https://img2.baidu.com/it/u=2141851239,1037607188&fm=26&fmt=auto&gp=0.jpg',
			// src:'http://localhost:8081/static/1.mp4',
			// bottomTip:'底部提示',
		 //  }, 
		 {type:'image', src:'https://b.bdstatic.com/searchbox/icms/searchbox/img/ci_boy.png'},
		 {type:'image', src:'https://b.bdstatic.com/searchbox/icms/searchbox/img/cheng_boy.png'},
	  ],
	  
	  dotIndex:0,//指示器索引
	  dotFloatIndex:0,//位置指示器索引
  }), 
  methods: {
	  effect3dMarginMethed(){
		 this.effect3dMargin++
	  },
	  switchDot(){//指示器样式切换
		  let arr = [ 'round', 'circle',  'default', 'index', 'number', 'none']
		  if(this.dotIndex < arr.length-1) {
			  this.dotIndex++
		  }else{
			  this.dotIndex = 0
		  } 
		  this.mode = arr[this.dotIndex]
	  },
	  switchDotFLoat(){//指示器位置切换
		  if(this.vertical) {
			  return uni.showToast({
			  	title:'垂直暂支持右侧',
				icon:'none'
			  })
		  }
		  let arr ='bottomCenter/topLeft/topCenter/topRight/bottomLeft/bottomRight'.split('/')
		  if(this.dotFloatIndex < arr.length-1) {
			  this.dotFloatIndex++
		  }else{
			  this.dotFloatIndex = 0
		  } 
		  this.indicatorPos = arr[this.dotFloatIndex]
	  }
  }
};
</script>

<style lang="scss">
	.full{
		position: relative;
		.btns{
			position: absolute;
			background-color: rgba(255,255,255,0.5);
			z-index: 99999;
			left: 100rpx;
			top: 50rpx;
			right: 100rpx;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			>view{
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				padding: 0 20rpx;
			}
			&.full{
				position: relative;
				left: 0;
				right: 0;
				>view{
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					padding: 0 20rpx;
					background-color: rgba(0,0,0,0.1);
					margin-bottom: 10rpx;
				}
			}
		}
	}
</style>
